<template>
  <div>
    <el-card class="page-card">
      <div>
        <el-row :gutter="30">
          <el-col :span="8">
            <el-card class="number-card-one" v-model="totalUsersAmount">
              <p>
                用户总数
                <el-divider direction="vertical"></el-divider>
                {{ totalUsersAmount }}</p>
              
            </el-card>
          </el-col>
          <el-col :span="8">
            <el-card class="number-card-two" v-model="totalAccountsAmount">
              <p>
                收支记录总数 <el-divider direction="vertical"></el-divider
                >{{ totalAccountsAmount }}
              </p>
            </el-card>
          </el-col>
          <el-col :span="8">
            <el-card class="number-card-three" v-model="totalCategoriesAmount">
              <p>
                分类总数<el-divider direction="vertical"></el-divider
                >{{ totalCategoriesAmount }}
              </p>
            </el-card>
          </el-col>
        </el-row>
      </div>
      <div style="margin-top: 10px">
        <el-input
          placeholder="请输入要查看的排行榜人数"
          v-model="number"
          class="input-box"
        ></el-input>
        <el-button
          slot="append"
          icon="el-icon-search"
          @click="getTableData"
          class="button-style"
        ></el-button>
        <el-table :data="list" height="360" border style="width: 100%" stripe>
          <el-table-column type="index" :index="1" width="50"> </el-table-column>>
          <el-table-column prop="userId" label="用户ID" width="250">
          </el-table-column>
          <el-table-column prop="nickname" label="昵称" width="250">
          </el-table-column>
          <el-table-column prop="days" label="打卡天数" width="200"> </el-table-column>
          <el-table-column prop="createTime" label="用户注册时间">
          </el-table-column>
        </el-table>
      </div>
    </el-card>
  </div>
</template>

<script>
import Common from "../utils/Common.vue";
export default {
  data() {
    return {
      totalUsersAmount: "",
      totalAccountsAmount: "",
      totalCategoriesAmount: "",
      number: "",
      list: [
        // {
        //   userId:'6789',
          
      
        // },
        // {
        //   userId:'6789',
          
      
        // }
      ],
    };
  },
  mounted() {
    this.getInit();
  },

  methods: {
    //页面刷新初始化
    getInit() {
      this.$axios({
        // headers: {
        //   "Content-Type": "application/x-www-form-urlencoded",  // 一定要设置这个头
        // },
        method: "GET",
        url: Common.base_url + "/admins/global",
      })
        .then((response) => {
          (this.totalUsersAmount = response.data.data.totalUsersAmount),
            (this.totalAccountsAmount = response.data.data.totalAccountsAmount),
            (this.totalCategoriesAmount =
              response.data.data.totalCategoriesAmount),
            console.log("页面刷新成功");
        })
        .catch((error) => {
          console.log("数据获取失败");
        });
    },
    //获取前多少名打卡的用户信息，对应到表格中
    getTableData() {
      //tudo:输入格式的限制
      // var reg_number=/^\\d+$/;
      // if(reg_number.test(this.number)==true){
      this.$axios({
        // headers: {
        //   "Content-Type": "application/x-www-form-urlencoded",  // 一定要设置这个头
        // },
        method: "GET",
        url: Common.base_url + "/admins/punches/" + this.number,
      })
        .then((response) => {
          // console.log(response.data);
          //  console.log(response.data.data); //数组
          this.list = response.data.data;
          //下面是时间戳的转换（搞了好久好久）
          for (var i = 0; i < response.data.data.length; i++) {
            var dateNeed = new Date(Number(response.data.data[i].createTime));
            // console.log(dateNeed.toLocaleDateString())
            this.list[i].createTime = dateNeed.toLocaleDateString();
          }
        })
        .catch((error) => {
          console.log(error);
          console.log("数据获取失败");
        });
    },
  },
};
</script>

<style>
.page-card {
  box-shadow: 0 0 25px #b8b9bb;
  height: 618px;
  border-radius: 25px;
  /* background-color: rgb(252, 248, 196); */
}
.number-card-one {
  font-family: "微软雅黑";
  box-shadow: 0 0 25px #afafaf;
  height: 150px;
  border-radius: 35px;
  color: rgb(99, 98, 98);
  background-color: rgb(193, 243, 255);
  /* font-weight:bold; */
  font-size: 35px;
  text-align: center;
  vertical-align: middle;
}
.number-card-two {
  box-shadow: 0 0 25px #afafaf;
  height: 150px;
  border-radius: 35px;
  /* line-height: 60px; */
  background-color: rgb(199, 255, 220);
  /* font-weight:bold; */
  color: rgb(99, 98, 98);
  font-size: 35px;
  text-align: center;
  vertical-align: middle;
}
.number-card-three {
  box-shadow: 0 0 25px #afafaf;
  height: 150px;
  border-radius: 35px;
  background-color: rgb(255, 204, 208);
  /* font-weight:bold; */
  color: rgb(99, 98, 98);
  text-align: center;
  font-size: 35px;

  vertical-align: middle;
}
.input-box {
  width: 300px;
  /* border-radius:30px; */
  padding-bottom: 10px;
  /* box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1) */
}
.button-style {
  color: #b8b8b8;
  background-color: #ceffef;
   border: rgb(211, 211, 211);
}
</style>